<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address-data">
			<view class="address-list" @click="onSkip('address')">
				<view class="list">
					<text>黑龙江哈尔滨市道里区城区</text>
				</view>
				<view class="list">
					<text class="address">爱建路1333号</text>
				</view>
				<view class="list">
					<text>张三</text>
					<text>178****8888</text>
				</view>
				<view class="list">
					<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
				</view>
			</view>
			<view class="bar">

			</view>
		</view>

		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<!-- 判断是否是秒杀订单 -->
			<view class="goods-list" v-if="type==1">
				<view v-if="isLoading" class="loading-tip">数据加载中，请稍候...
					<br />
					<image :src="'https://preview.qiantucdn.com/58pic/34/82/70/49m58PICn7C7Q28a3P86c_PIC2018.gif!qt480'"
						mode=""></image>
				</view>
				<view class="list" v-for="(item,index) in spikesOrderData" :key="index">
					<view class="thumb">
						<image :src="item.Img" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{item.Title}}</text>
							<text class="attr">颜色：灰色,XL</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{item.SpikesPrice}}</text>
							</view>
							<view class="number">
								<text>x 1</text>
							</view>
						</view>
						<!-- <view class="tag">
										<text>支持七天无理由退货</text>
									</view> -->
					</view>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="thumb">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{item.title}}</text>
							<text class="attr">颜色：{{item.property_value_id_1}},{{item.property_value_id_2}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							<view class="number">
								<text>x {{item.num}}</text>
							</view>
						</view>
						<!-- <view class="tag">
                            <text>支持七天无理由退货</text>
                        </view> -->
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">配送</view>
					<view class="content">
						<text>快递运输</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">运费险</view>
					<view class="content">
						<text>￥10.00</text>
						<text class="iconfont icon-check"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discounts-data">
			<view class="discounts">
				<div class="list" @click="$refs['InvoiceInfo'].show()">
					<view class="title">发票</view>
					<view class="content">
						<text>不开发票</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list" @click="$refs['UseCoupon'].show()">
					<view class="title">优惠券</view>
					<view class="content">
						<text>无可用</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">积分</view>
					<view class="content">
						<text>共300，满1000可用</text>
						<!-- <text class="iconfont icon-more"></text> -->
					</view>
				</div>
			</view>
		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{totalGoodsAmount.toFixed(2)}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>会员折扣</text>
					</view>
					<view class="price">
						<text>-￥19.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址提示 -->
		<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
			<text>黑龙江哈尔滨市道里区爱建路1333号</text>
		</view>
		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<!-- 判断是否是秒杀价格 -->
			<view class="price" v-if="type==1" v-for="(item,index) in spikesOrderData" :key="index">
				<text class="min">￥</text>
				<text class="max">{{(spikesOrderData[0].SpikesPrice - 19).toFixed(0)}}</text>
				<text class="min">.00</text>
			</view>
			<view class="price" v-else>
				<text class="min">￥</text>
				<text class="max">{{(totalGoodsAmount -19).toFixed(0)}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>


		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon ref="UseCoupon"></use-coupon>
	</view>
</template>

<script>
	import spikes from '../api/spikes';
	import createorder from '../api/order';
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
		},
		data() {
			return {
				scrollTop: 0,
				list: [],
				lists: [],
				totalGoodsAmount: 0,

				//订单类型
				type: 0,
				activity_id: 0,
				goods_id: 0,
				sku_id: 0,
				scrollTop: 0,
				spikesOrderData: [],
				isLoading: true,
				price : "",
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(params) {
			this.type = params.type
			//判断是否是秒杀订单
			if (this.type == 1) {
				console.log("是秒杀订单类型")
				console.log("秒杀数据：：", params)
				this.activity_id = params.activity_id
				this.goods_id = params.goods_id
				this.sku_id = params.sku_id
				this.spikesOrder()
				console.log("调用接口")
			} else {
				this.CreateOrderList();
			}
		},
		methods: {
			/**
			 * 提交订单
			 */
			onSubmit() {
				
				uni.redirectTo({
					url: '/pages/CashierDesk/CashierDesk?type=' + this.type + '&price='+ this.price,
				})
			},
			CreateOrderList() {
				createorder.OrderCreate({
					addressID: 1,
					couponID: 2,
					GoodsItem: [{
							"goodsID": 5,
							"skuID": 4,
							"num": 3
						},
						{
							"goodsID": 2,
							"skuID": 1,
							"num": 2
						}
					],
				}).then(res => {
					console.log(res)
					if (!res.data) {
						return
					}
					this.list = res.data.OrderGoodsInfo || [];
					// 赋值订单信息到 lists
					this.lists = [res.data];
					this.calculateTotalGoodsAmount();
				}).catch(error => {
					console.error('获取订单信息失败:', error);
				});
			},
			//秒杀 通过goods_id查询商品数据
			spikesOrder() {
				console.log("接收到的商品ID：：：", this.goods_id);
				console.log("接收到的活动ID：：：", this.activity_id);
				console.log("接收到的skuID：：：", this.sku_id);

				spikes.getOrderInfoBygoodsID({
					goods_id: this.goods_id,
					activity_id: this.activity_id,
					sku_id: this.sku_id,
				}).then(res => {
					this.spikesOrderData = res.data
					console.log("查询到的订单商品数据", this.spikesOrderData)
					this.price = this.spikesOrderData[0].SpikesPrice - 19
					
					this.isLoading = false;
				})
			},
			/**
			 * 计算商品总金额
			 */
			calculateTotalGoodsAmount() {
				let total = 0;
				this.list.forEach(item => {
					total += item.price * item.num;
				});
				this.totalGoodsAmount = total;
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/pages/AddressList/AddressList',
						})
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
</style>